<template>
  <div class="m-2 p-3">
    <el-table border size="small" :data="tableData" v-loading="loading">
      <el-table-column prop="user_data.nickname" label="用户昵称"></el-table-column>
      <el-table-column prop="user_data.user_id" label="用户ID"></el-table-column>
      <el-table-column prop="consume_sugar_num" label="消耗糖果"></el-table-column>
      <el-table-column prop="consume_point_num" label="消耗点数"></el-table-column>
      <el-table-column prop="gift_info.name" label="礼物名称"></el-table-column>
      <el-table-column prop="create_time" label="兑换时间"></el-table-column>
    </el-table>

    <el-pagination
      class="mt-3 text-right"
      background
      layout="total, prev, pager, next"
      :total="meta.total"
      @current-change="handleCurrentChange">
    </el-pagination>

  </div>
</template>

<script>
import {getExchangeLog} from "@/api/eventManagement/userRede";

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      meta: {
        current_page: 1,
        total: 0,
        per_page: 10
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.loading = true
      getExchangeLog({page: this.meta.current_page, per_page: this.meta.per_page})
        .then(res => {
          const {data: {data, current_page, total, per_page}} = res
          this.tableData = data
          this.meta.current_page = current_page
          this.meta.total = total
          this.meta.per_page = per_page
        })
        .finally(() => this.loading = false)
    },
    handleCurrentChange(page) {
      this.meta.current_page = page
      this.initData()
    }
  }

}
</script>
